<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>栅格系统练习</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <script src="../layui/layui.js"></script>

    <!-- 一个容器保证整体布局居中 -->
    <div class="layui-container">
        <!-- 整体抽象成一行 -->
        <div class="layui-row">
            <!-- 第一列 -->
            <div class="layui-col-lg3" style="height: 400px; background-color: pink"></div>
            <!-- 第二列 -->
            <div class="layui-col-lg9" style="height: 400px">
                <!-- 第二列再成两行 -->
                <div class="layui-row" style="height: 200px; background-color: blue"></div>
                <div class="layui-row">
                    <!-- 再成两列 -->
                    <div class="layui-col-lg9" style="height: 200px; background-color: red"></div>
                    <div class="layui-col-lg3" style="height: 200px; background-color: yellow"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>